<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <style>
        .div-project {
            width: 100%;
            margin: 10px 0;
        }

        .div-project .layui-inline {
            width: calc(50% - 5px);
            margin-right: 0px;
        }
    </style>
</head>

<body>
<div class="layui-container div-project" id="div-project">

    <form action="save" method="post" class="layui-form" lay-filter="form_outgiving">

        <div class="layui-form-item" th:unless="${item}">
            <blockquote class="layui-elem-quote layui-quote-nm">
                添加关联分发项目是将已经存在的项目进行关联
            </blockquote>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>分发ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" placeholder="分发ID（设置后将不能修改）" required lay-verify="required"
                           th:class="${item}?'layui-input layui-disabled':'layui-input'" th:value="${item?.id}"
                           th:readonly="${item}">
                    <input type="hidden" name="reqId" th:value="${reqId}">
                    <input type="hidden" name="type" th:value="${type}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>分发名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="分发名称" required lay-verify="required"
                           class="layui-input" th:value="${item?.name}">

                </div>
            </div>
        </div>

        <div class="layui-form-item" style="padding-left: 30%" id="appendNodeDiv">
            <a class="layui-btn layui-btn-sm layui-btn-warm" id="add_selectNode">添加节点项目
            </a>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分发后</label>
                <div class="layui-input-block">
                    <select name="afterOpt" id="afterOpt">
                        <option value="">请选择分发后的操作</option>
                        <option th:each="sel : ${afterOpt}" th:value="${sel.code}"
                                th:selected="${sel.code==item?.afterOpt}" th:text="${sel.desc}">
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item"
             style="padding-left: 20%;padding-top: 20px;">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="form_outgiving">提交
            </button>

            <a th:if="${item}" class="layui-btn layui-btn-warm" th:data-id="${item?.id}" id="delete_outgiving">删除</a>
        </div>
    </form>
</div>
<div id="selectNode" style="display: none;padding-top: 20px;">
    <form action="" class="layui-form" lay-filter="form_node">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">选择节点</label>
                <div class="layui-input-block">
                    <select name="nodeId" required lay-verify="required" lay-filter="selectNode">
                        <option value="">请选择节点</option>

                        <option th:each="i : ${nodeModels}" th:value="${i.id}" th:nodeName="${i.name}"
                                th:text="${i.name}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitNode">确定
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>

<script type="text/html" th:each="i : ${nodeModels}" th:id="'node_project_'+${i.id}">
    <div class="layui-form-item" th:nodeDiv="${i.id}">
        <div class="layui-inline">
            <label class="layui-form-label"><span class="x-red">*</span>{{ d.name }}</label>
            <div class="layui-input-block">
                <select th:name="'node_'+${i.id}" required lay-verify="required">
                    <option value="">选择选择项目</option>
                    <optgroup th:each="ii : ${i.groupProjects}" th:label="${ii.group}">
                        <option th:each="iProject : ${ii.projects}" th:value="${iProject.id}"
                                th:text="${iProject.name}"></option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-sm  layui-btn-danger" del="node">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </div>
    </div>
</script>

<script type="text/javascript" th:inline="javascript" th:each="nodeP : ${item?.outGivingNodeProjectList}">
    asyncFn.push(function () {
        var nodeId = [[${nodeP.nodeId}]];
        var selectOption = $("select[name='nodeId'] option[value='" + nodeId + "']");
        addNode(nodeId, selectOption);
        // 选中
        $("select[name='node_" + nodeId + "']").val([[${nodeP.projectId}]]);
        form.render();
    });


</script>

<script type="text/javascript">
    var laytpl;

    function loadSuccess() {
        layui.use(['laytpl'], function () {
            laytpl = layui.laytpl;
            //
            form.on('submit(submitNode)', function (data) {
                var nodeId = data.field.nodeId;
                if (nodeId == "") {
                    layer.msg("请选择节点");
                    return false;
                }
                //
                var selectOption = $("select[name='nodeId']").find("option:selected");
                addNode(nodeId, selectOption);
                return false;
            });
            //
        });


        form.on('submit(form_outgiving)', function (data) {
            var len = $("div[nodeDiv]").length;
            if (len <= 0) {
                layer.msg("请添加节点项目");
                return false;
            }
            if (len < 2) {
                layer.msg("至少添加两个项目及以上");
                return false;
            }
            loadingAjax({
                url: data.form.action,
                data: data.field,
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 == data.code) {
                        autoClose();
                    }
                }
            });
            return false;
        });


        $("#add_selectNode").click(function () {
            layerOpen({
                type: 1,
                title: '选择节点',
                content: $('#selectNode'),
                area: ['40%', '80%']
            });
        });

        $("#delete_outgiving").click(function () {
            var id = $(this).attr("data-id");
            var msg = '确定删除分发项目【 ' + id + '】？（不会影响实际项目的状态）';
            layer.confirm(msg, {
                title: '系统提示'
            }, function (index) {
                loadingAjax({
                    url: './del.json',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        layer.msg(data.msg);
                        if (200 == data.code) {
                            autoClose();
                        }
                    }
                });
            });
        });

        $("body").delegate("a[del='node']", "click", function () {
            var nodeId = $(this).parent().parent().attr("nodeDiv");
            $("select[name='nodeId'] option[value='" + nodeId + "']").attr("disabled", false);
            form.render();
            $(this).parent().parent().remove();
            $("#add_selectNode").show();
        });

    }

    function addNode(nodeId, selectOption) {
        var html = document.getElementById('node_project_' + nodeId);
        var nodeName = selectOption.attr("nodeName");
        laytpl(html.innerHTML).render({
            name: nodeName
        }, function (newHtml) {
            $("#appendNodeDiv").before(newHtml);
            layer.closeAll();
            // 改变已经选过的选项
            selectOption.attr("disabled", true);
            selectOption.attr("selected", false)
            form.render();
            // 检查按钮状态
            if ($("div[nodeDiv]").length >= $("select[name='nodeId']").find("option").length - 1) {
                $("#add_selectNode").hide();
            }
        });
    }
</script>
</html>